<template>
  <div class="content">
    <div class="swiper-container xlunbotu">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <star-content :goods="goods"></star-content>
        </div>
        <div class="swiper-slide">
         <hong-ren :datas="datas"></hong-ren>
        </div>
        <div class="swiper-slide">
          <atical-content :photos="photos"></atical-content>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import StarContent from "./StarContent.vue";
  import AticalContent from "./AticalContent.vue";
  import HongRen from "./HongRen.vue";
    export default {
      props:["goods","datas","photos"],
      components:{
        StarContent,
        AticalContent,
        HongRen
      },
      mounted:function(){
        setTimeout(changeTime,1000);
        function changeTime () {
          var mySwiper = new Swiper ('.xlunbotu', {
            direction: 'horizontal',
            autoHeight: true,
            onSlideChangeStart:function(e){
              var index=e.activeIndex;
              $(".xhead-c span:first-child").removeClass("active");
              $(".xhead-c span").eq(index).addClass("active").siblings().removeClass("active");
            }
          });
        }
       }
        }

</script>

<style lang="scss" scoped>
  /*.swiper-container{*/
    /*overflow:scroll!important;*/
  /*}*/
  .content{
  flex: 1;
  width: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  }
</style>
